<template>
  <view>
    <!--<view class="nav">-->
    <!--  <view :class="{ active: status === '' }" @tap="changeStatus()">全部订单</view>-->
    <!--  <view :class="{ active: status === 0 }"  @tap="changeStatus(0)">待付款</view>-->
    <!--  <view :class="{ active: status === 1 }"  @tap="changeStatus(1)">待进场</view>-->
    <!--  <view :class="{ active: status === 2 }"  @tap="changeStatus(2)">已进场</view>-->
    <!--  <view :class="{ active: status === 3 }"  @tap="changeStatus(3)">已离场</view>-->
    <!--  <view :class="{ active: status === 4 }"  @tap="changeStatus(4)">已关闭</view>-->
    <!--  <view :class="{ active: status === 5 }"  @tap="changeStatus(5)">已退款</view>-->
    <!--</view>-->
    <view>
      <u-tabs :list="list" @click="changeStatus"></u-tabs>
    </view>
    <view class="list">
      <view v-for="(item,index) in data">
        <view class="top">
          <view>{{ item.created_at }}</view>
          <view @tap="gotoSelectOrder(item.order_no)">
            {{ item.status_text }}
            <uni-icons type="right" size="12"></uni-icons>
          </view>
        </view>
        <view class="bottom">
          <img :src="item.room.image" alt="">
          <view>
            <view class="roomName">{{ item.room.name }}</view>
            <view>{{ item.private_room.name }}</view>
            <view>{{ item.date }}</view>
            <view>{{ item.start_t }} - {{ item.end_t }}</view>
          </view>
          <view class="spacer"></view>
          <view>
            <view class="spacer"></view>
            <view class="price">￥{{ item.total }}</view>
            <view><label class="deposit">押金</label>￥{{ item.deposit }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: '',
      data: [],
      list: [
          {
            name: '全部订单',
            value: 'all'
          },
          {
            name: '待付款',
            value: 0
          },
          {
            name: '待进场',
            value: 1
          },
          {
            name: '已进场',
            value: 2
          },
          {
            name: '已离场',
            value: 3
          },
          {
            name: '已关闭',
            value: 4
          },
          {
            name: '已退款',
            value: 5
          }
      ]
    }
  },
  onLoad:function(options){
    this.status = options.status == '' ? '' : parseInt(options.status)
    this.getOrderList()
  },
  methods: {
    changeStatus: function(e){
      console.log('e', e)

      this.status = this.list[e.index].value;
      this.getOrderList()
    },
    getOrderList: function(){
      uni.showLoading({
        title: '加载中...'
      });

      uni.$u.http.post('getOrderList', {
        status: this.status === 'all' ? '' : this.status
      }).then(res => {
        if(res.code == 200){
          this.data = res.data
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'error',
            duration: 1000 // 提示框持续时间，单位为毫秒
          })
        }
      }).catch(error => {
        uni.showToast({
          title: '获取数据失败',
          icon: 'error',
          duration: 1000 // 提示框持续时间，单位为毫秒
        })
      }).finally(() => {
        uni.hideLoading()
      })
    },
    gotoSelectOrder: function(order_no){
      uni.navigateTo({
        url: `./detail?order_no=${order_no}`
      })
    }
  }
}
</script>

<style>
.nav{
  background: #fff;
  padding: 30rpx 30rpx;
  display: flex;
  gap: 30rpx;
  overflow: auto;
}
.nav view{
  flex: 0 0 auto;
  background: #EFEFEF;
  padding: 10rpx 30rpx;
  font-size: 26rpx;
  vertical-align: middle;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: normal;
}
.nav view.active{
  background: #93D2F3;
  color: #0070BB;
  font-weight: bold;
}

.spacer{
  flex: 1;
}
.list{
  margin-top: 30rpx;
  padding: 0rpx 30rpx;
}
.list > view{
  background: #fff;
  padding: 30rpx 20rpx;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
}
.list .top{
  display: flex;
  justify-content: space-between;
  color: #6C6C6C;
  font-size: 24rpx;
}
.list .bottom{
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  gap: 30rpx;
  font-size: 24rpx;
  color: #777777;
}
.list .bottom img{
  width: 200rpx;
  height: 200rpx;
}
.list .bottom > view{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20rpx;
}
.list .bottom > view:last-of-type{
  align-items: flex-end;
}
.roomName{
  font-size: 36rpx;
  color: #000;
}
.price{
  font-size: 40rpx;
  color: #000;
}
.deposit{
  font-size: 28rpx;;
}
</style>
